<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="讲师名称">
        <el-input v-model="formInline.user" placeholder="请输入讲师名称"></el-input>
      </el-form-item>
        <el-form-item label="手机号">
        <el-input v-model="formInline.mobile" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="formInline.status" placeholder="请选择">
          <el-option label="区域一" :value="num"></el-option>
          <el-option label="区域二" :value="num2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="btn-box">
      <el-row>
        <el-button type="primary">新增讲师</el-button>
        <el-button type="primary">批量导入</el-button>
        <el-button type="primary">批量导出</el-button>
        <el-button type="primary">查看报表</el-button>
      </el-row>
    </div>
    <el-table
      ref="multipleTable"
      :data="pageList"
      border
      tooltip-effect="dark"
      max-height="650"
      style="width: 100%">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" prop="nickname" label="讲师名称" width="120"></el-table-column>
      <el-table-column align="center" prop="mobile" label="手机号" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="name" label="课程" width="120"></el-table-column>
      <el-table-column align="center" prop="uid" label="序号" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="status" label="审核状态" width="120"></el-table-column>
      <el-table-column align="center" prop="updated_at" label="更新时间" show-overflow-tooltip>
        <template #default="scope">
          <div>
            {{ timeFomate(scope.row.updated_at)  }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
       <template>
        <span>审核</span>-<span>排序</span>-<span>编辑</span>
      </template>
      </el-table-column>
    </el-table>
    <div class="pageBox">
      <el-pagination
      @size-change="sizeChange"
      @current-change="curChange"
      background
      v-model:current-page="pageIndex"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="10"
      layout="sizes, prev, pager, next"
      :total="list.length">
      </el-pagination>
    </div>
    
 </div>
</template>

<script>
import { ElButton, ElForm, ElFormItem, ElInput, ElRow, ElTable, ElTableColumn, ElPagination, ElSelect, ElOption } from 'element-plus';
import list from '/public/list.json'
let listCopy = JSON.stringify(list)
// console.log(list);
export default {
  name: '',
  components: {
      'el-button': ElButton,
      ElSelect,
      ElForm,
      ElFormItem,
      ElInput,
      ElRow,
      ElTable,
      ElTableColumn,
      ElPagination,
      ElSelect,
      ElOption
  },
  data() { 
    return {
      formInline: {
        user: '',
        mobile: '',
        status: null
      },
      list,
      num: 1,
      num2: 2,
      pageIndex: 1,
      pageSize: 10,
      pageList: []
    }
  },
  created() {
    this.pageCom()
  },
  methods:{
    fun(scope) {
      console.log(scope);
    },

    sizeChange(size) {
      this.pageIndex = 1
      this.pageCom()
    },

    curChange() {
      this.pageCom()
    },

    search() {
      this.pageList = this.list.filter(item => {
        return (item.nickname.includes(this.formInline.user) && item.mobile.includes(this.formInline.mobile))
      })
    },

    pageCom() {
      let newList = JSON.parse(listCopy)
      this.pageList = []
      this.pageList = newList.splice((this.pageIndex - 1)*this.pageSize, this.pageSize)
    }
  },
 }
</script>

<style scoped>
.pageBox {
  margin-top: 20px;
}
.btn-box {
  margin: 20px 0;
}
</style>